<template>
  <el-drawer
    v-model="drawerVisible"
    title="折扣活动详情"
    size="800px"
    :before-close="handleClose"
  >
    <div class="discount-detail">
      <!-- 基本信息 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">活动名称：</span>
              <span class="value">{{ detailData.discountName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">活动状态：</span>
              <span class="value">{{ formatStatus(detailData.status) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">活动时间：</span>
              <span class="value">{{ detailData.startTime }} 至 {{ detailData.endTime }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">报名时间：</span>
              <span class="value">{{ detailData.signStartTime }} 至 {{ detailData.signEndTime }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">活动介绍：</span>
              <span class="value">{{ detailData.remark }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      
      <!-- 优惠规则 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>优惠规则</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">优惠方式：</span>
              <span class="value">{{ formatDiscountMode(detailData.discountMode) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">优惠方案：</span>
              <span class="value">{{ formatDiscountProgramme(detailData.discountProgramme) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">折扣设置：</span>
              <span class="value">{{ detailData.discount }}{{ detailData.discountMode === 1 ? '折' : '元' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">限购设置：</span>
              <span class="value">{{ detailData.ifLimit === 1 ? `限购${detailData.limitNumber}件` : '不限购' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">活动保证金：</span>
              <span class="value">{{ detailData.ifBond === 1 ? `需要，${detailData.bondMoney}元` : '不需要' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      
      <!-- 参与商家 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>参与商家</span>
          </div>
        </template>
        <el-table :data="shopData" border>
          <el-table-column prop="shopName" label="店铺名称" />
          <el-table-column prop="shopCode" label="店铺编码" />
          <el-table-column prop="products" label="商品数" />
          <el-table-column prop="status" label="审核状态">
            <template #default="scope">
              {{ formatShopStatus(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" link>查看商品</el-button>
              <el-button type="primary" link>审核记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="shopPage.current"
            v-model:page-size="shopPage.size"
            :page-sizes="[10, 20, 50]"
            :total="shopPage.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleShopSizeChange"
            @current-change="handleShopCurrentChange"
          />
        </div>
      </el-card>
      
      <!-- 活动数据 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>活动数据</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col v-for="item in activityData" :key="item.name" :span="8">
            <div class="data-item">
              <div class="data-label">{{ item.name }}</div>
              <div class="data-value">{{ item.value }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'

interface DetailData {
  discountName: string
  status: number
  startTime: string
  endTime: string
  signStartTime: string
  signEndTime: string
  remark: string
  discountMode: number
  discountProgramme: number
  discount: number
  ifLimit: number
  limitNumber: number
  ifBond: number
  bondMoney: string
}

interface ShopData {
  shopName: string
  shopCode: string
  products: number
  status: number
}

interface ActivityData {
  name: string
  value: string | number
}

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const drawerVisible = ref(false)

// 监听modelValue变化
watch(() => props.modelValue, (val) => {
  drawerVisible.value = val
}, { immediate: true })
const detailData = ref<DetailData>({
  discountName: '',
  status: 0,
  startTime: '',
  endTime: '',
  signStartTime: '',
  signEndTime: '',
  remark: '',
  discountMode: 1,
  discountProgramme: 1,
  discount: 0,
  ifLimit: 2,
  limitNumber: 0,
  ifBond: 0,
  bondMoney: ''
})

const shopData = ref<ShopData[]>([])
const activityData = ref<ActivityData[]>([
  { name: '浏览量', value: 0 },
  { name: '支付订单数', value: 0 },
  { name: '支付买家数', value: 0 },
  { name: '支付转化率', value: '0%' },
  { name: '参与商家数', value: 0 },
  { name: '参与商品数', value: 0 },
  { name: '活动成交金额', value: '¥0' }
])

const shopPage = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 打开抽屉
const open = (row: any) => {
  drawerVisible.value = true
  // 这里应该从row中获取数据并调用API获取详情
  // 模拟数据
  detailData.value = {
    discountName: row.discountName || '限时折扣活动',
    status: row.status || 1,
    startTime: row.startTime || '2023-06-01 00:00:00',
    endTime: row.endTime || '2023-06-30 23:59:59',
    signStartTime: row.signStartTime || '2023-05-01 00:00:00',
    signEndTime: row.signEndTime || '2023-05-20 23:59:59',
    remark: row.remark || '这是一个限时折扣活动',
    discountMode: row.discountMode || 1,
    discountProgramme: row.discountProgramme || 1,
    discount: row.discount || 8,
    ifLimit: row.ifLimit || 2,
    limitNumber: row.limitNumber || 0,
    ifBond: row.ifBond || 0,
    bondMoney: row.bondMoney || ''
  }
  
  // 模拟商家数据
  shopData.value = [
    { shopName: '店铺1', shopCode: 'SP001', products: 10, status: 1 },
    { shopName: '店铺2', shopCode: 'SP002', products: 5, status: 2 },
    { shopName: '店铺3', shopCode: 'SP003', products: 8, status: 0 }
  ]
  
  shopPage.total = shopData.value.length
}

// 关闭抽屉
const handleClose = () => {
  drawerVisible.value = false
  emit('update:modelValue', false)
}

// 格式化状态
const formatStatus = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '未开始',
    1: '进行中',
    2: '已结束'
  }
  return statusMap[status] || '未知'
}

// 格式化优惠方式
const formatDiscountMode = (mode: number) => {
  const modeMap: Record<number, string> = {
    1: '折扣',
    2: '直降'
  }
  return modeMap[mode] || '未知'
}

// 格式化优惠方案
const formatDiscountProgramme = (programme: number) => {
  const programmeMap: Record<number, string> = {
    1: '单商品优惠',
    2: '多商品优惠'
  }
  return programmeMap[programme] || '未知'
}

// 格式化商家状态
const formatShopStatus = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '待审核',
    1: '审核通过',
    2: '审核拒绝'
  }
  return statusMap[status] || '未知'
}

// 处理商家分页大小变化
const handleShopSizeChange = (val: number) => {
  shopPage.size = val
  // 这里应该重新获取数据
}

// 处理商家当前页变化
const handleShopCurrentChange = (val: number) => {
  shopPage.current = val
  // 这里应该重新获取数据
}

// 暴露方法
defineExpose({ open })
</script>

<style scoped lang="scss">
.discount-detail {
  padding: 20px;
  
  .detail-card {
    margin-bottom: 20px;
    
    .card-header {
      font-weight: bold;
      font-size: 16px;
    }
    
    .detail-item {
      margin-bottom: 15px;
      display: flex;
      
      .label {
        width: 120px;
        color: #666;
      }
      
      .value {
        flex: 1;
        color: #333;
      }
    }
    
    .data-item {
      text-align: center;
      padding: 15px 0;
      border-right: 1px solid #eee;
      
      &:last-child {
        border-right: none;
      }
      
      .data-label {
        color: #666;
        margin-bottom: 5px;
      }
      
      .data-value {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>